var templates = {
    aboutViewTemplate:"views/aboutViewTemplate.html",
    defaultViewTemplate:"views/defaultViewTemplate.html",
    tableViewTemplate:"views/tableViewTemplate.html",
    loaded: 0,
    requested: 0
};

var ___templatesLoadedCallback;

function loadTemplates(callback) {
    ___templatesLoadedCallback = callback;

    //load Mousetache HTML templates
    for (var key in templates) {
        (function() {
             var _key = key.toString();
             if ( _key != "loaded" && _key != "requested" ){
                 templates.requested ++;

                 var templateLoaded = function( template ){
                    onTemplateLoaded( template, _key );
                 }

                 $.get( templates[ _key ], templateLoaded, "html" );
             }
         })();
    }
}


function onTemplateLoaded(template, key) {
    templates[ key ] = template;
    templates.loaded ++;

    if ( templates.loaded == templates.requested ) {
        ___templatesLoadedCallback();
    }
}

function isTablet() {
    var _w = $(window).width();
    var _h = $(window).height();
    return (Math.min(_w,_h) >= 600);
}

function ViewCafeOrder() {
    this.touchSupported = 'ontouchstart' in window;
    //this.CLICK_EVENT = this.touchSupported ? 'touchend' : 'click';
    this.CLICK_EVENT = 'click';
    
    return this;
}

ViewCafeOrder.prototype.defaultView = function() {
    var el = $(templates.defaultViewTemplate);
    var listTables = el.find( "#listTables" );
    var tables = [["table1","Table 1"],["table2","Table 2"],["table3","Table 3"]];
    var listTablesContent = '';
    for(i = 0;i < tables.length;i++) {
        listTablesContent += '<div><a class="table" id="'+tables[i][0]+'" href="#">'+tables[i][1]+'</a></div>';        
    }    
    listTables.html(listTablesContent);
    for(i = 0;i < tables.length;i++) {
        el.find("#"+tables[i][0]).on(this.CLICK_EVENT, {id : tables[i][0]}, onSelectTable);
    }    
    
    return el;
}

ViewCafeOrder.prototype.tableView = function() {
    var el = $(templates.tableViewTemplate);
    var listMenus = el.find("#listMenus");
    var menus = [["cafe", "Cafe"],["wine", "Wine"]];
    var listMenusContent = "";
    for(i = 0;i < menus.length;i++) {
        listMenusContent += '<div><a class="menu" id="'+menus[i][0]+'" href="#">'+menus[i][1]+'</a></div>'; 
    }
    listMenus.html(listMenusContent);

    return el;
}